<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo用户注册页</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .m-title {
            margin-top: 30px;
        }

        .bd-example {
            position: relative;
            padding: 1rem;
            margin: 1rem;
            border: solid #f7f7f9;
            border-width: .2rem 0 0;
        }

        @media (min-width: 576px){
            .bd-example {
                padding: 1.5rem;
                margin-right: 0;
                margin-left: 0;
                border-width: .2rem;
            }
        }

        .form-divider {
            margin: 30px 0;
        }

        .btn-sender {
            margin-top: 5px;
        }

        .user-info {
            position: relative;
            width: 100px;
            margin: 25px auto 0;
        }

        #userAvatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 0;
        }

        #userNickname {
            display: block;
            margin-top: 15px;
            font-size: 16px;
            color: #b8c4ce;
            text-align: center;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3 class="text-center m-title">用户注册页面</h3>
        <div class="user-info">
            <img src="" alt="用户头像" id="userAvatar" class="img-responsive">
            <p id="userNickname"></p>
        </div>
        <form action="/user/register" method="post">
            <div class="form-group row text-right">
                <label class="col-sm-2 col-form-label">用户名：</label>
                <div class="col-sm-6">
                    <input type="text" name="username" class="form-control" placeholder="用户名">
                </div>
            </div>
            <div class="form-group row text-right">
                <label class="col-sm-2 col-form-label">密码：</label>
                <div class="col-sm-6">
                    <input type="password" name="password" class="form-control" placeholder="Password">
                </div>
            </div>
            <div class="row">
                <div class="form-check col-sm-6 offset-sm-2">
                    <input type="checkbox" class="form-check-input" name="remember-me">
                    <label class="form-check-label">Check me out</label>
                </div>
            </div>
            <input type="submit" value="提交" class="btn btn-primary offset-sm-2">
        </form>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $.get("/social/user",function (res) {
                console.log(res);
                var avatar = res.avatar;
                $("#userAvatar").attr("src",avatar);
                $("#userNickname").html(res.nickname);
            });
        });
    </script>
</body>
</html>